<template>
  <!--密码输入-->
  <div class="input-password-box">
    <div class="input-password-title">
      <p v-text="title"></p>
    </div>
    <div class="input-password">
      <input
        :value="value"
        @input="inputChange"
        type="password"
        :disabled="readOnly"
        id="input-password"
        ref="password"
        autocomplete="off"
        :placeholder="placeholder_def">
      <template v-if="!readOnly">
        <div
          @click="show()"
          class="show-controller show"
          id="show"
          ref="show">
          <svg-icon icon-class="eye-close"/>
          <!-- ☑ -->
        </div>
      </template>
      <template v-if="!readOnly">
        <div
          @click="notShow()"
          class="show-controller not-show"
          id="notShow"
          ref="notShow">
          <svg-icon icon-class="eye-open"/>
          <!-- × -->
        </div>
      </template>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            value:{
                type: Object,
                default: () => null
            },
            title:{
                type: String,
                default: () => "密码框"
            },
            placeholder:{
                type: String,
                default: () => null
            },
            readOnly:{
                type: Boolean,
                default: () => false
            },
        },
        data() {
            return {
                placeholder_def: this.placeholder == null? "请输入" + this.title : this.placeholder
            }
        },
        methods: {
            show() {
                if (this.$refs.password.type == "password") {
                    this.$refs.password.type = "text"
                    this.$refs.show.style.display = "none"
                    this.$refs.notShow.style.display = "block"
                }
            },
            notShow() {
                if (this.$refs.password.type != "password") {
                    this.$refs.password.type = "password"
                    this.$refs.show.style.display = "block"
                    this.$refs.notShow.style.display = "none"
                }
            },
            inputChange(e) {
                this.$emit("input", e.target.value);
            }
        }
    }
</script>

<style scoped>
  input, input:focus {
    background: none;
    outline: none;
    border: none;
  }
  input[type="password"]::-ms-reveal{
    display:none
  }
  .input-password-box {
    width: 100%;
    height: 30px;
    margin: 15px auto;
    position: relative;
  }
  .input-password-title {
    cursor: default;
    float: left;
    width: 20%;
    height: 100%;
    line-height: 30px;
    /* font-size: 14px; */
    letter-spacing: 1.5px;
  }
  .input-password-title > p {
    width: 100%;
    margin: 0 0;
    text-align: center;
    color: rgba(255, 255, 255,0.5);
  }
  .input-password {
    cursor: default;
    float: left;
    width: 70%;
    position: relative;
  }
  .input-password input {
    cursor: default;
    border: 1px solid #2b313e;
    border-radius: 3px;
    width: 100%;
    height: 25px;
    padding-left: 8px;
    padding-right: 8px;
    /* font-size: 13px; */
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255,0.5);
    background-color: #222833; /*背景颜色*/
    transition: 0.3s;
  }
  .input-password input:focus {
    border: 1px solid #39404d;
  }
  .input-password input::placeholder {
    color: rgba(255, 255, 255,0.2);
    font-weight: lighter;
  }
  .show-controller {
    user-select:none;
    cursor: pointer;
    width: 17px;
    height: 17px;
    /* font-size: 14px; */
    position: absolute;
    top: 6px;
    right: -5px;
    text-align: center;
    line-height: 17px;
    color: rgba(255, 255, 255,0.3);
  }
  .show-controller:hover {
    color: rgba(255, 255, 255,0.5);
  }
  .show {
    display: block;
  }
  .not-show {
    display: none;
  }
</style>
